<template>
  <div>
    <base-modal
      :title="title"
      :show.sync="visible"
      width="524px"
      :close-on-click-modal="false">
      <div class="dialog-main">
        <el-radio-group v-model="exchangeType">
          <!-- 暂时隐藏 -->
          <!-- <el-radio label="1" size="large">
            <span>用积分抵扣价格的</span>
            <el-input-number
              v-model="config.input1"
              placeholder="请输入"
              :controls="false"
              :precision="0"
              :min="0" />
            <span>%</span>
          </el-radio>
          <el-radio label="2" size="large">
            <span>用服务费抵扣价格的</span>
            <el-input-number
              v-model="config.input2"
              placeholder="请输入"
              :controls="false"
              :precision="0"
              :min="0" />
            <span>%</span>
          </el-radio> -->
          <el-radio label="3" size="large" v-if="isShowPoints">
            <el-input-number
              v-model="config.input3"
              :placeholder="$t('common.placeholder.input2')"
              :controls="false"
              :precision="0"
              :min="0" />
            <span>{{ $t('common.member.point') }}</span>
          </el-radio>
          <el-radio label="4" size="large" v-if="isShowService">
            <el-input-number
              v-model="config.input4"
              :placeholder="$t('common.placeholder.input2')"
              :controls="false"
              :precision="0"
              :min="0" />
            <span>{{ $t('common.member.serviceFee') }}</span>
          </el-radio>
          <el-radio label="5" size="large" v-if="isShowPoints">
            <el-input-number
              v-model="config.input5"
              :placeholder="$t('common.placeholder.input2')"
              :controls="false"
              :precision="2"
              :min="0" />
            <span>{{$t('common.base.yuan')}} +</span>
            <el-input-number
              v-model="config.input7"
              :placeholder="$t('common.placeholder.input2')"
              :controls="false"
              :precision="0"
              :min="0" />
            <span>{{ $t('common.member.point') }}</span>
          </el-radio>
          <el-radio label="6" size="large" v-if="isShowService">
            <el-input-number
              v-model="config.input6"
              :placeholder="$t('common.placeholder.input2')"
              :controls="false"
              :precision="2"
              :min="0" />
            <span>{{$t('common.base.yuan')}} +</span>
            <el-input-number
              v-model="config.input8"
              :placeholder="$t('common.placeholder.input2')"
              :controls="false"
              :precision="0"
              :min="0" />
            <span>{{ $t('common.member.serviceFee') }}</span>
          </el-radio>
        </el-radio-group>
        <!-- <div class="dialog-main-tip">
          若商品价格为100元，积分/服务费抵现规则为10积分/服务费=1元，抵扣比例为10%，则购买该商品最多可用100积分/服务费抵扣，剩余最少支付90元。
        </div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('common.base.cancel') }}</el-button>
        <el-button type="primary" @click="handleSave" :loading="loading">
          {{ $t('common.base.save') }}
        </el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import i18n from '@src/locales';
import { addExchangeRule, updateExchangeRule } from '@src/api/Member'

export default {
  data() {
    return {
      visible: false,
      loading: false,
      exchangeType: '3',
      config: {
        input1: undefined,
        input2: undefined,
        input3: undefined,
        input4: undefined,
        input5: undefined,
        input6: undefined,
        input7: undefined,
        input8: undefined,
      },
      goodsParams: {},
      action: '',
    }
  },
  props: {
    memberAuth: {
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    title() {
      const obj = {
        create: i18n.t('member.exchangeRule.title1'),
        edit: i18n.t('common.base.edit'),
        batchEdit: i18n.t('common.base.bulkEdit'),
      }

      return obj?.[this.action] || i18n.t('member.exchangeRule.title1');
    },
    isShowPoints() {
      return this.memberAuth?.pointsEnable || false;
    },
    isShowService() {
      return this.memberAuth?.serviceFeeEnable || false;
    },
  },
  methods: {
    open(action, params, row) {
      this.handleReset();

      this.goodsParams = params;
      this.action = action;
      if (this.action === 'edit') this.handleChangeConfig(row);
      if (!this.isShowPoints) this.exchangeType = '4';

      this.visible = true;
    },
    handleChangeConfig(row) {
      if (!row) return;
      this.exchangeType = `${row.exchangeType}`;

      if (this.exchangeType === '1' || this.exchangeType === '2') {
        this.config[`input${this.exchangeType}`] = row?.percentage || 0;
      }
      if (this.exchangeType === '3' || this.exchangeType === '4') {
        this.config[`input${this.exchangeType}`] = row?.serviceIntegralCount || 0;
      }
      if (this.exchangeType === '5' || this.exchangeType === '6') {
        this.config[`input${~~this.exchangeType + 2}`] = row?.serviceIntegralCount || 0;
        this.config[`input${this.exchangeType}`] = row?.money || 0;
      }
    },
    handleBuildParams() {
      const params = {
        exchangeType: ~~this.exchangeType,
      };
      if (this.exchangeType === '1' || this.exchangeType === '2') {
        params.percentage = this.config[`input${this.exchangeType}`]
        if (!params.percentage) return false;
      }
      if (this.exchangeType === '3' || this.exchangeType === '4') {
        params.serviceIntegralCount = this.config[`input${this.exchangeType}`]
        if (!params.serviceIntegralCount) return false;
      }
      if (this.exchangeType === '5' || this.exchangeType === '6') {
        params.serviceIntegralCount = this.config[`input${~~this.exchangeType + 2}`]
        params.money = this.config[`input${this.exchangeType}`]
        if (!params.serviceIntegralCount || !params.money) return false;
      }

      return {
        ...this.goodsParams,
        ...params
      }
    },
    async handleSave() {
      try {
        this.loading = true;
        const params = this.handleBuildParams();
        if (!params) {
          this.loading = false;
          return this.$message.error(i18n.t('member.exchangeRule.title2'));
        }
        
        const fn = this.action === 'create' ? addExchangeRule : updateExchangeRule;
        const { code } = await fn(params);

        if (code !== 0) {
          this.loading = false;
          return this.$message.error(i18n.t('member.exchangeRule.title3'));
        }

        this.$message.success(i18n.t('member.exchangeRule.title4'));
        this.loading = false;
        this.visible = false;
        this.handleReset();

        setTimeout(() => {
          this.$emit('reloadPage');
        }, 1000);
      } catch (error) {
        this.loading = false;
        console.error('handleReleased error', error);
      }
    },
    handleReset() {
      this.config = this.$options.data.call(this).config;
      this.params = {};
      this.exchangeType = '3';
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog-main {
  padding: 20px;
  position: relative;

  span {
    margin-right: 8px;
  }

  .el-input-number {
    width: 120px;
    margin-right: 8px;
  }

  .el-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .el-radio {
    height: 50px;
  }

  // .el-radio:nth-child(1),
  // .el-radio:nth-child(2) {
  //   .el-input-number {
  //     width: 80px;
  //   }
  // }

  // .el-radio:nth-child(2) {
  //   height: 90px;
  // }

  &-tip {
    color: #8C8C8C;
    position: absolute;
    top: 110px;
    left: 43px;
    width: 440px;
    font-size: 12px;
  }
}
</style>
